import {
  Box,
  Flex,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalHeader,
  ModalOverlay,
  SimpleGrid,
  useDisclosure,
} from '@chakra-ui/react';
import { useCallback, useEffect, useState } from 'react';

import EditModal from './EditModal';
import ModelDetail from './ModelDetail';
import ModelItem from './ModelItem';
import Pagination from './Pagination';

import { ModelTraining } from '@/pages/Training/Model';
interface ModelList {
  models: ModelTraining[];
  table?: any;
}
export default function ModelList({ models, table }: ModelList) {
  const [modelList, setModelList] = useState<ModelTraining[]>(models);
  const [showDetailModel, setShowDetailModel] = useState<ModelTraining | null>(
    null
  );

  const [showEditModel, setShowEditModel] = useState<ModelTraining | null>(
    null
  );
  const { isOpen, onOpen, onClose } = useDisclosure();
  const {
    isOpen: isEditOpen,
    onOpen: onEditOpen,
    onClose: onEditClose,
  } = useDisclosure();

  const showDetail = useCallback(
    (model: ModelTraining) => {
      onOpen();
      setShowDetailModel(model);
    },
    [onOpen]
  );

  const showEditModal = useCallback(
    (model: ModelTraining) => {
      onEditOpen();
      setShowEditModel(model);
    },
    [onEditOpen]
  );

  const onModelEditClose = (newInfo: Partial<ModelTraining>) => {
    onEditClose();
    // 更新模型信息展示
    const index = models.findIndex((i) => i.id === newInfo.id);
    const newModel = { ...models[index], ...newInfo };
    models.splice(index, 1, newModel);
    // setModelList(newList);
  };

  useEffect(() => {
    setModelList(models);
  }, [models]);
  return (
    <Flex direction="column" h="full" flexGrow="1">
      <Box flexGrow="1">
        <SimpleGrid
          columns={{
            base: 1,
            sm: 2,
            md: 3,
            lg: 3,
            xl: 4,
            '2xl': 5,
          }}
          spacingX={{
            base: 16,
          }}
          spacingY={20}
          mt={16}
        >
          {modelList.map((i, index) => (
            <ModelItem
              key={i.name + index}
              model={i}
              modalOnOpen={showDetail}
              modalOnEdit={showEditModal}
            />
          ))}
        </SimpleGrid>
      </Box>

      {modelList.length > 0 && table && (
        <Flex p="2" mt="8" w="full" justify="center">
          <Pagination table={table} />
        </Flex>
      )}
      <Modal
        scrollBehavior="inside"
        isOpen={isOpen}
        onClose={onClose}
        size="xl"
        isCentered
      >
        <ModalOverlay />
        <ModalContent fontFamily="Inter">
          <ModalCloseButton />
          <ModalHeader fontWeight="bold" py={2}>
            模型详情
          </ModalHeader>
          <ModalBody>
            <ModelDetail detail={showDetailModel} />
          </ModalBody>
        </ModalContent>
      </Modal>
      <EditModal
        model={showEditModel}
        isEditOpen={isEditOpen}
        onEditClose={onModelEditClose}
      />
    </Flex>
  );
}
